<!DOCTYPE html>
<html>
<head>
    <title>$app.topic tag配置</title>
    #parse("/inc/meta.htm")
</head>
<body id="inner_page_start">
#parse("/inc/header.htm")
<div id="wrapper">
    #parse("/inc/menu.htm")
    <div id="content-wrapper">
        <div class="container-fluid">
            <!-- 面包屑-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    二维码管理
                </li>
                <li class="breadcrumb-item active">二维码图片</li>
            </ol>
        </div>
        <!-- /.container-fluid class="card mb-3"-->
        <div class="container-fluid">
            <div class="card-body">

                <div class="row">
                    <div>

                    </div>

                </div>
                <form action="/other/groupInfo">
                <div class="row">
                    <label for="input_file">
                        <div  class="btn btn-primary">上传图片</div>
                        <input
                                type="file"
                                name="file"
                                id="input_file"
                                accept="image/*"
                                onchange="imgPreview(this)"
                                style="display: none;"
                        />
                        <div id="up-error"></div>
                    </label>
                    <input type="hidden" class="form-control" id="menu-img" name="img" />
                </div>

                <div class="row">
                    <img id="img-show" src="$!app.staticUrl$!respData.url" style="width: 200px; height:300px;margin: 0 auto;" />
                </div>

                    <div class="row">
                        <button style="margin: 50px auto ;" class="btn btn-primary">替换图片</button>
                    </div>

                    <div class="row">
                        <div>
                        请访问 &nbsp;
                        <a href="http://api.cyzgqd.com:8080/group" target="_blank" >
                            http://api.cyzgqd.com:8080/group</a>&nbsp;
                        扫码入群</div>
                    </div>
                </form>
            </div>
        </div>
        #parse("/inc/copyright.htm")
    </div>
    <!-- /.content-wrapper -->
</div>
#parse("/inc/footer.htm")
<script type="text/javascript">
    function imgPreview(fileDom) {
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        if(!file){
            alert("请重新选择图片！");
            return ;
        }
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }

        $("#up-error").text("正在上传......");

        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("img-show");
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);

        var formData = new FormData();
        formData.append("file", $("#input_file")[0].files[0]); //添加图片信息的参数
        formData.append("op", "file"); //添加其他参数
        formData.append("folder", "barcode");
        $.ajax({
            url: "/img/in",
            type: "POST",
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function(data) {
                //var rs = data;
                if (data.state == "000") {
                    $("#up-error").text("上传成功！图片可用");
                    $("#img-show").attr("src",host+ data.data);
                    $("#menu-img").val(data.data)
                } else {
                    tipTopShow(data.data);
                }
            },
            error: function(data) {
                tipTopShow("上传失败,请稍后重试。");
            }
        });
    }

    function tipTopShow(ms) {
        $("#up-error").text(ms);
        $("#img-show").removeAttr("src");
    }
</script>
</body>
</html>
